import React, { Component } from 'react';
import { Card, Spin, Icon, Alert } from 'antd';

import './style.less';

class LoadingPage extends Component {

  render() {
    const icon = <Icon type="loading" style={{ fontSize: 24 }} />;
    return (
      <div>
        <Card title="Spin用法" className="pinlor-cards">
          <Spin size="small" className="pinlor-spin" />
          <Spin className="pinlor-spin" />
          <Spin size="large" className="pinlor-spin" />
          <Spin indicator={icon} className="pinlor-spin" />
        </Card>
        <Card title="内容遮罩">
          <Alert
            message="Pinlor"
            description="欢迎登录Pinlor后台管理系统"
            type="info"
            className="pinlor-alert" />

          <Alert
            message="Pinlor"
            description="欢迎登录Pinlor后台管理系统"
            type="warning"
            className="pinlor-alert" />

          <Spin>
            <Alert
              message="Pinlor"
              description="欢迎登录Pinlor后台管理系统"
              type="error"
              className="pinlor-alert" />
          </Spin>

          <Spin
            tip="加载中"
            indicator={icon}>
            <Alert
              message="Pinlor"
              description="欢迎登录Pinlor后台管理系统"
              type="error"
              className="pinlor-alert" />
          </Spin>
        </Card>
      </div>
    )
  }
}

export default LoadingPage;
